<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 默认 300*150， 类似ps中的一个透明的图层 -->
    <canvas id="myCanvas" width="300" height="300"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas')
      var ctx = canvas.getContext('2d')
      // 开始一个新的路径
      ctx.beginPath()
      ctx.moveTo(20, 30)
      ctx.lineTo(180, 80)
      ctx.lineTo(100, 120)

      // 线宽度，默认1px
      ctx.lineWidth = 8
      // 闭合路径
      ctx.closePath()
      // 描边（相当于边框）
      ctx.stroke()
    </script>
  </body>
</html>
